import { LanguageTypeString, QuestionType } from '@/components/question/typing';
import { Checkbox, Divider, InputNumber, Space } from 'ant-design-vue';
import { defineComponent, PropType, ref } from 'vue';
import CommonAttributeComponent from '../common-attribute-component';
import CommonSettingButtons from '../common-setting-buttons';

export default defineComponent({
  props: {
    question: {
      type: Object as PropType<QuestionType>,
    },
    language: {
      type: String as PropType<LanguageTypeString>,
      required: true,
    },
  },

  setup(props) {
    const { language, question } = props;
    const questionProper =
      language === 'zh' ? question?.questionProperZh : question?.questionProperEn;

    const wordLimitChange = () => {
      if (questionProper!.shortAnswerItem!.isWordLimit) {
        questionProper!.shortAnswerItem!.minCharCount = 1;
        questionProper!.shortAnswerItem!.maxCharCount = 100;
      } else {
        questionProper!.shortAnswerItem!.minCharCount = 0;
        questionProper!.shortAnswerItem!.maxCharCount = 0;
      }
    };
    const errorMessages = ref('');

    const minChange = () => {
      checkMinAndMax();
    };
    const maxChange = () => {
      checkMinAndMax();
    };
    const checkMinAndMax = () => {
      errorMessages.value = '';
      if (
        questionProper!.shortAnswerItem!.minCharCount! >=
        questionProper!.shortAnswerItem!.maxCharCount!
      ) {
        if (language === 'zh') {
          errorMessages.value = '最大字符数必须大于最小字符数';
        } else if (language === 'en') {
          errorMessages.value =
            'The maximum number of characters must be greater than the minimum number of characters';
        }
      }
    };
    return () => {
      return (
        <div class="short-answer-question-attribute-panel">
          <CommonAttributeComponent question={question} language={language} />
          <Divider plain={true}>基本设置</Divider>
          <div class="map-attribute-design-item-container">
            <Checkbox
              v-model:checked={questionProper!.shortAnswerItem!.isWordLimit}
              onChange={wordLimitChange}
            >
              字数限制
            </Checkbox>
          </div>
          {questionProper!.shortAnswerItem?.isWordLimit ? (
            <>
              <div class="map-attribute-design-item-container">
                <InputNumber
                  v-model:value={questionProper!.shortAnswerItem!.minCharCount}
                  style="width: 48%;margin-right:16px"
                  onChange={minChange}
                >
                  {{
                    addonBefore: () => '最小字符数:',
                  }}
                </InputNumber>
                <InputNumber
                  v-model:value={questionProper!.shortAnswerItem!.maxCharCount}
                  onChange={maxChange}
                  style="width: 48%;"
                >
                  {{
                    addonBefore: () => '最大字符数:',
                  }}
                </InputNumber>
              </div>
              <div style="color:#f81d22;font-size:14px;margin-top:-10px">{errorMessages.value}</div>
            </>
          ) : (
            <></>
          )}
          <div style="text-align:center">
            <Space>
              <CommonSettingButtons question={question} language={language} />
            </Space>
          </div>
        </div>
      );
    };
  },
});
